<template>
  <div>
    <j-modal
      :title='title'
      :width='800'
      :visible='visible'
      :confirmLoading='confirmLoading'
      switchFullscreen
      @ok='handleOk'
      @cancel='handleCancel'
      cancelText='关闭'>

      <a-spin :spinning='confirmLoading'>
        <a-form-model ref='form' :model='model' :rules='validatorRules'>

          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' prop='orderNo' label='订单号'>
            <a-input placeholder='自动生成' v-model='model.orderNo' disabled />
          </a-form-model-item>
          <!--        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customId" label="客户id">
                    <a-input placeholder="请输入客户id" v-model="model.customId" />
                  </a-form-model-item>-->
          <div style='margin-left: 80px'>
            <a-button type='primary' @click='customModalShow'>客户选择</a-button>
          </div>
          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' prop='customName' label='客户名称'>
            <a-input placeholder='请选择客户' v-model='model.customName' disabled/>
          </a-form-model-item>
          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' prop='amount' label='收款金额'>
            <a-input placeholder='请输入收款金额' v-model='model.amount' />
          </a-form-model-item>
          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' prop='bank' label='收款银行'>
            <a-input placeholder='请输入收款银行' v-model='model.bank' />
          </a-form-model-item>
          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' prop='receiveTime' label='收款日期'>
            <a-date-picker valueFormat='YYYY-MM-DD' v-model='model.receiveTime' />
          </a-form-model-item>
          <!--        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="auditingUser" label="审核人">
                    <a-input placeholder="请输入审核人" v-model="model.auditingUser" />
                  </a-form-model-item>
                  <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="auditingTime" label="审核日期">
                    <a-date-picker showTime valueFormat='YYYY-MM-DD HH:mm:ss' v-model="model.auditingTime" />
                  </a-form-model-item>-->
          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' prop='remark' label='备注'>
            <a-input placeholder='请输入备注' v-model='model.remark' />
          </a-form-model-item>

        </a-form-model>
      </a-spin>
    </j-modal>
    <!--    选择客户的弹窗-->
    <a-modal v-model:visible='customVisible' width='70%' title='客户选择' @ok='customAdd'>
      <div style='margin-bottom: 10px'>
        <a-row style='margin-top: 10px'>
          <a-col :span='10'>
            <div style='display: inline-block;width: 90px;'>客户名称：</div>
            <div style='display: inline-block;width: 70%'>
              <a-input v-model='queryCustomParams.name' placeholder='请输入客户名称' allow-clear
                       @change='searchCustom' />
            </div>
          </a-col>
          <a-col :span='10'>
            <div style='display: inline-block;width: 90px;'>客户电话：</div>
            <div style='display: inline-block;width: 70%'>
              <a-input v-model='queryCustomParams.phone' placeholder='请输入客户电话' allow-clear
                       @change='searchCustom' />
            </div>
          </a-col>
          <a-col :span='4'>
            <a-button type='primary' icon='search' @click='searchCustom'>
              查询
            </a-button>
          </a-col>
        </a-row>
      </div>
      <a-table :columns='customColumns' :data-source='customDataSource' bordered
               :loading='customLoading'
               :row-selection="{selectedRowKeys: selectedRowKeys,type: 'radio',onChange:customOnChange}"
               row-key='id'
               :pagination='customPagination'
               @change='selectCustomPaginationChange'
      ></a-table>
    </a-modal>
  </div>
</template>

<script>
import { httpAction } from '@/api/manage'
import moment from 'moment'
import {
  getFlowerCustom
} from '@/api/api'

export default {
  name: 'FlowerOutOrderPreFundModal',
  data() {
    return {
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      confirmLoading: false,
      validatorRules: {
        customName: [
          { required: true, message: '请选择客户', trigger: 'change' }
        ],
        amount: [
          { required: true, message: '收款金额必须是数字', pattern: new RegExp(/^(\-|\+)?\d+(\.\d+)?$/), trigger: 'change' }
        ],
        bank: [
          { required: true, message: '请输入收款银行', trigger: 'change' }
        ],
        receiveTime: [
          { required: true, message: '请选择收款日期', trigger: 'change' }
        ]
      },
      url: {
        add: '/flower/flowerOutOrderPreFund/add',
        edit: '/flower/flowerOutOrderPreFund/edit'
      },
      customVisible: false,//是否打开客户选择的弹窗
      customColumns: [// 客户选择弹窗中表格的表头
        {
          title: '客户编码',
          dataIndex: 'code',
          align: 'center',
          width: 120
        }, {
          title: '客户名称',
          dataIndex: 'name',
          align: 'center',
          width: 150
        }, {
          title: '客户电话',
          dataIndex: 'phone',
          align: 'center',
          width: 120
        }, {
          title: '客户地址',
          dataIndex: 'address',
          align: 'center'
        }
      ],
      customDataSource: [],//客户列表
      selectCustom: {},//客户选择弹窗中已选择的客户
      customPagination: {// 客户表格的分页
        total: 0,
        current: 1,
        pageSize: 10,//每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],//每页中显示的数据
        showTotal: total => `共有 ${total} 条数据`  //分页中显示总的数据
      },
      customLoading: false,
      queryCustomParams: {// 客户选择弹窗的查询
        name: '',
        phone: ''
      },
      selectedRowKeys: [],
      selectionRows: []
    }
  },
  created() {
  },
  methods: {
    add() {
      //初始化默认值
      this.edit({})
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.$refs.form.clearValidate()
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.close()
    },
    customModalShow() {//打开客户选择弹窗
      /*设置下面这两行是为了处理再次打开客户选择弹窗时，
      还会在界面上保留上次选择客户而实际上没有选择任何客户的问题*/
      this.selectedRowKeys.length = 0
      this.selectionRows.length = 0

      this.customPagination = {// 客户表格的分页
        total: 0,
        current: 1,
        pageSize: 10,//每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],//每页中显示的数据
        showTotal: total => `共有 ${total} 条数据`  //分页中显示总的数据
      }
      this.queryCustomParams = {// 客户选择弹窗的查询
        name: '',
        phone: ''
      },
        this.customVisible = true
      this.queryFlowerCustom()
    },
    //获取客户列表
    queryFlowerCustom() {
      this.customLoading = true
      let params = {
        pageNo: this.customPagination.current,
        pageSize: this.customLoading.pageSize
      }
      params = { ...this.queryCustomParams, ...params }
      getFlowerCustom(params).then(res => {
        if (res.success) {
          this.customPagination.total = res.result.total
          this.customDataSource = res.result.records
        } else {
          this.$message.error(res.message)
        }
        this.customLoading = false
      })
    },
    customOnChange(selectedRowKeys, selectionRows) {//选择客户弹窗中选择客户时的回调
      this.selectedRowKeys = selectedRowKeys// 如果不加这两行的话无法多选
      this.selectionRows = selectionRows

      this.selectCustom = selectionRows[0]
    },
    selectCustomPaginationChange(pagination) {
      this.customPagination = pagination
      this.queryFlowerCustom()
    },
    customAdd() {// 客户选择中的确定选择客户
      if (JSON.stringify(this.selectCustom) !== '{}') {
        this.model.customId = this.selectCustom.id
        this.model.customName = this.selectCustom.name
      }
      this.customVisible = false
    },
    searchCustom() {// 客户选择弹窗中的查询客户
      this.queryFlowerCustom()
    }

  }
}
</script>

<style lang='less' scoped>

</style>